<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Cherry官网-首页</title>
    <header th:replace="client/util.html"></header>
</head>
<body>
<!-- nav部分 -->
<div th:replace="client/head.html"></div>
<!-- banner部分 -->
<div class="banner about">
    <div class="title">
        <p>关于我们</p>
        <p class="en">About Us</p>
    </div>
</div>
<!-- main部分 -->
<div class="main-about">
    <div class="layui-container">
        <div class="layui-row">
            <ul class="aboutab">
                <li class="layui-this">公司简介</li>
                <li>发展历程</li>
            </ul>
            <div class="tabIntro">
                <div class="content">
                    <div class="layui-inline img"><img th:src="@{/my/img/us_img1.jpg}"></div>
                    <div class="layui-inline panel">
                        <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
                    </div>
                </div>
                <div class="content">
                    <div class="layui-inline panel p_block">
                        <p>如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是Layui不灭的执念。</p>
                    </div>
                    <div class="layui-inline img"><img th:src="@{/my/img/us_img2.jpg}"></div>
                    <p class="p_hidden">
                        如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是Layui不灭的执念。</p>
                </div>
                <div class="content">
                    <div class="layui-inline img"><img th:src="@{/my/img/us_img3.jpg}"></div>
                    <div class="layui-inline panel">
                        <p>拥有双面的不仅是人生，还有Layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。</p>
                    </div>
                </div>
            </div>
            <div class="tabCour">
                <p class="title">我们的蜕变</p>
                <ul class="timeline">
                    <li class="odd">
                        <div class="cour-img"><img th:src="@{/my/img/us_img4.png}"></div>
                        <div class="cour-panel layui-col-sm4 layui-col-lg5">
                            <p class="label">2017 年 6 月</p>
                            <p>我们成立了，来到了杭州西湖这个美丽的地方。</p>
                        </div>
                    </li>
                    <li>
                        <div class="cour-img"><img th:src="@{/my/img/us_img5.png}"></div>
                        <div class="cour-panel layui-col-sm4 layui-col-sm-offset8 layui-col-lg5 layui-col-lg-offset7">
                            <p class="label">2017 年 6 月</p>
                            <p>我们成立了，来到了杭州西湖这个美丽的地方。</p>
                        </div>
                    </li>
                    <li class="odd">
                        <div class="cour-img"><img th:src="@{/my/img/us_img6.png}"></div>
                        <div class="cour-panel layui-col-sm4 layui-col-lg5">
                            <p class="label">2017 年 6 月</p>
                            <p>我们成立了，来到了杭州西湖这个美丽的地方。</p>
                        </div>
                    </li>
                    <li>
                        <div class="cour-img"><img th:src="@{/my/img/us_img7.png}"></div>
                        <div class="cour-panel layui-col-sm4 layui-col-sm-offset8 layui-col-lg5 layui-col-lg-offset7">
                            <p class="label">2017 年 6 月</p>
                            <p>我们成立了，来到了杭州西湖这个美丽的地方。</p>
                        </div>
                    </li>
                    <li class="odd">
                        <div class="cour-img"><img th:src="@{/my/img/us_img8.png}"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- footer部分 -->
<div th:replace="client/foot.html"></div>
</body>
</html>